import { memo } from 'react';
import { Handle, Position } from '@xyflow/react';
import { Filter, Code2 } from 'lucide-react';

const iconMap = {
  filter: Filter,
  code2: Code2,
  default: Filter,
};

interface ConditionNodeData {
  label: string;
  subtitle: string;
  icon: string;
}

interface ConditionNodeProps {
  data: ConditionNodeData;
  id: string;
}

export const ConditionNode = memo(({ data }: ConditionNodeProps) => {
  const IconComponent = iconMap[data.icon as keyof typeof iconMap] || iconMap.default;
  
  return (
    <div className="workflow-node workflow-node-condition min-w-[200px] text-white">
      <div className="flex items-center gap-3 p-3">
        <div className="bg-white/20 p-2 rounded-lg">
          <IconComponent className="w-5 h-5" />
        </div>
        <div className="flex-1 min-w-0">
          <div className="font-semibold text-sm">{data.label}</div>
          <div className="text-xs opacity-90">{data.subtitle}</div>
        </div>
      </div>
      
      <div className="px-3 pb-2">
        <div className="text-xs opacity-75">
          🔀 Logic Branch
        </div>
      </div>
      
      <Handle
        type="target"
        position={Position.Left}
        className="workflow-handle"
        style={{ left: -6 }}
      />
      
      {/* Multiple output handles for different conditions */}
      <Handle
        type="source"
        position={Position.Right}
        id="true"
        className="workflow-handle"
        style={{ right: -6, top: '30%' }}
      />
      
      <Handle
        type="source"
        position={Position.Right}
        id="false"
        className="workflow-handle"
        style={{ right: -6, top: '70%' }}
      />
      
      {/* Labels for the outputs */}
      <div className="absolute right-2 top-1/4 transform -translate-y-1/2">
        <div className="text-xs opacity-75">✓</div>
      </div>
      <div className="absolute right-2 bottom-1/4 transform translate-y-1/2">
        <div className="text-xs opacity-75">✗</div>
      </div>
    </div>
  );
});